My Roles: Lead UX designer & researcher
Application: Adobe XD
Duration of the course: January 2023 - February 2023
Created with: Google UX course
At-A-Glance 👀
HoopDreams is a responsive gaming website. The purpose of this site is to allow users to sign-up, check news updates and access the HoopDreams support Centre. The main goal is to ensure users have a smooth stress free time signing up to the site.
Problem
Online video game websites have a lengthy sign-up process and unnecessary username and password rules which take up the user's time when wanting to get stuck into their new game, which harms the user's experience and makes the sign-up process tedious.
Solution
To design a sign-up process for Hoopdreams that will allow users to create an efficient gaming account to play with friends.
Process
User Research
To kick off my user research, I interviewed four of my friends. I asked them a series of questions about the problems and challenges they face when signing up for gaming accounts or other sign-up processes in general. While asking these questions I took a voice recording of the responses given by each participant. I then made some observations after my interviews were complete and noted down my response drawing up 4 pain points that were stressed by the participants.
Pain Points
After conducting my interviews I made some observations after my interviews were complete and noted down my response drawing up 4 pain points that were stressed by the participants.
User Persona
After specifying my pain points I was able to draw up a user persona which shows the type of user who would benefit from HoopDreams sign-up process.
User Journey Map - Maxo
This map displays Maxo user journey from finding Hoopdreams on a gaming platform to downloading the game and playing with his friends. During this journey, I highlighted how Maxo would be feeling at each step, whilst also noting small changes that could be made to make his experience better.
Competitor Analysis
Information Architecture
This Information Architecture shows a structural design of HoopDreams. I made this to give me a better understanding of the type of screen I would be building in my design. It would also allow other stakeholders to understand the type of content that would be in HoopDreams, as well as the users.
Sketches
During this phase of my design I took the time to create 4 different home screen layout for Hoopdreams. When sketching these home screens I took into consideration the initial response received from my user research interviews but also my competitor analysis to help me decided the necessary features for the web page. I also used some ideas from my crazy 8 task to help with my paper sketches.
Low-Fidelity Wireframe
After Sketching out my designs I went to Adobe XD to build low-fidelity prototypes for both the web and mobile screens. These went on to be the rough editions to HoopDreams to give more that were interactive to show how my screens would flow between each other before making more changes later and adding colour.
Test my Lo-Fi Prototype here
Usability Study
High-Fidelity Prototypes
Sticker sheet
Iterations
Takeaways
Impact
HoopDreams is a digestible design for users to navigate around. It's simple to understand and the sign-up process is quick to fill out and informative for gamers looking to play HoopDreams without getting caught up in the tedious part of Singing up for a new video game.
What I learnt
In this project, I was able to gain new skills in Adobe XD such as prototyping, creating components and using different plugins and UI kits to help aid my design. I also got to experience laying out a sign-up process for a gaming web page, that users will find efficient and seamless to complete.
Next Steps
1.If this was a real design project my next step would be collaborating with front and backend engineers but also other UX designers.
2.Another possible step would be to create more screen variations for tablets and other devices.
3.Lastly, I would try and get more people to test my prototype web page and get their feedback on it as my sample size was v small for this project.
